<template>
  <div class="box">
    <nav-bar class="nav-top">
      <div slot="center">购物车({{ cartLength }})</div>
    </nav-bar>
    <shop-list :cart-lists="cartList"/>
    <shop-bottom-bar/>
  </div>
</template>
<script>
// 顶部购物车商品个数
import NavBar from "components/common/navbar/NavBar";

// 商品的展示
// 下单
import ShopList from './childShop/ShopList'
import ShopBottomBar from './childShop/ShopBottomBar'

// vuex的方法   （Getter 会暴露为 store.getters 对象，你可以以属性的形式访问这些值：）
import { mapGetters } from "vuex";

export default {
  components: {
    NavBar,
    ShopList,
    ShopBottomBar,
  },
  computed: {
    ...mapGetters(["cartLength", "cartList"]),
  },
};
</script>
<style scoped>
.nav-top {
  background-color: #ff8f96;
  font-size: 16px;
  color: #fff;
}
</style>